var OrderTable = function () {
  var template = /*html*/ `
    <div class="order-table" v-loading.fullscreen.lock="loading">
      <template v-if="user!==null">
      <div class="orderTable" :class="{'hasPage':pagination.totalCount!==0}">
        <el-table fit stripe border :data="orders" style="width: 100%" height="parent">
          <el-table-column :resizable="false" label="操作" min-width="150px" fixed="left" header-align="center">
            <template slot-scope="scope">
            <div style="text-align:center;">
              <template v-if="scope.row.status===0&&hasApprovalAuthority">
              <el-button type="primary" size="mini" @click="updateStatus(scope.row,1)">审核</el-button>
              <el-button type="danger" size="mini" @click="updateStatus(scope.row,2)">退回</el-button>
              </template>
              <template v-if="canDelete(scope.row)">
              <el-button type="danger" size="mini" @click="deleteOrder(scope.row)">删除</el-button>
              </template>
            </div>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="companyOrderId" label="订单编号" :auto-width="true" min-width="80px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="factoryId" label="工厂型号" :auto-width="true" min-width="80px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="coustomId" label="客户型号" :auto-width="true" min-width="80px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="coustomOrderId" label="客户订单号" :auto-width="true" min-width="90px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="supplierName" label="供应商" :auto-width="true" min-width="70px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="technology" label="加工工艺" :auto-width="true" min-width="80px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="flowCycle" label="流程周期" min-width="80px" align="center"></el-table-column>
          <el-table-column :resizable="false" prop="maching" label="加工对象" :auto-width="true" min-width="70px" header-align="center">
            <template slot-scope="scope">
              <span v-if="!scope.row.hasEleOrder">{{scope.row.maching}}</span>
              <el-popover v-else title="电镀详情" trigger="hover" placement="right-start">
                <div slot="reference">
                  {{scope.row.maching}}(电镀)
                </div>
                <electroplate-detail :order="scope.row"></electroplate-detail>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="color" label="颜色" :auto-width="true" min-width="60px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="count" label="返回数量" min-width="80px" align="center"></el-table-column>
          <el-table-column :resizable="false" prop="unitPrice" label="单价" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" prop="returnCount" label="外协数量(付)" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" prop="valuationCount" label="外协计价数量" min-width="100px" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.valuationCount}} {{scope.row.valuationUint}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="totalMoney" label="金额" min-width="120px" align="center"></el-table-column>
          <el-table-column :resizable="false" prop="isFinish" label="是否完成" min-width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('outBusinessMgr.orderTable.isFinish.'+scope.row.isFinish)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="返回类型" min-width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('outBusinessMgr.orderTable.inOutType.'+scope.row.inOutType)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="返回时间" width="100px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.returenTime!==''">{{moment(scope.row.returenTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="returnUser" label="返回制单人" :auto-width="true" min-width="90px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="状态" min-width="60px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('outBusinessMgr.orderTable.status.'+scope.row.status)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="remark" label="备注" width="151px" show-overflow-tooltip header-align="center">
          </el-table-column>
          <el-table-column :resizable="false" label="可审核人" min-width="100px;" :auto-width="true" header-align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.approvalNameList">
                {{scope.row.approvalNameList.join(" ")}}
              </span>
            </template>
		      </el-table-column>
          <el-table-column :resizable="false" prop="approvalUser" label="返回审核人" :auto-width="true" min-width="90px" header-align="center">

          </el-table-column>
          <el-table-column :resizable="false" label="返回审核时间" min-width="110px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.approvalTime!==''">{{moment(scope.row.approvalTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
      </table-pagination>
      </template>
    </div>
  `;

  return {
    mixins: [
      tablePaginationMixin(null)
    ],

    props: {
      orders: {
        type: Array,
        default: function () {
          return [];
        }
      },
      pagination: {
        type: Object,
        default: function () {
          return {
            currentPage: 1,
            totalCount: 0,
            pageSize: 10
          };
        }
      }
    },
    data: function () {
      return {
        loading: false,
        moment: moment,
        user: null,
        hasApprovalAuthority:false
      };
    },
    created:function(){
      this.loading = true;
      var self = this;
      SysUtil.getUser().then(function(user){
        var flag = PermissionUtil.validateAuthorityByUser(user, 'putOutNew/approvalPutOutWarehouse');
        self.hasApprovalAuthority = flag;
        self.user = user;
        self.loading = false;
      }).catch(function(){
        self.loading = false;
      });
    },
    methods: {
      updateStatus: function (order, operation) {
        var typeId = order.typeId;
        this.loading = true;
        var self = this;
        ajaxRequest('putOutNew/approvalPutOutOrderReturn', {
          typeId: typeId,
          status: operation
        }).then(function (msg) {
          self.$alert(msg, '信息', {
            callback: function (action) {
              self.$emit('update-status');
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      deleteOrder: function (order) {
        this.loading = true;
        var self = this;
        ajaxRequest('putOutNew/deletePutOutOrderReturn', {
          typeId: order.typeId
        }).then(function () {
          self.loading = false;
          self.$alert('外协单返回删除成功', '信息', {
            callback: function () {
              self.$emit('delete-order');
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      pageChange: function () {
        this.$emit('page-change');
      },

      canDelete: function (order) {
        var status = order.status;
        if (status !== 2) {
          return false;
        }
        var user = this.user;
        return user.userName === order.createUser;
      }
    },
    components:{
      ElectroplateDetail:ElectroplateDetail
    },
    template: template
  };
}();